<template>
	<view>
		<uNavbar :title="titles" :bgColor="backgroundColor" leftIconColor="#ffffff"></uNavbar>
		<!-- 商品 -->
		<view class="commodity flex_Z">
			<view class="commodity_top">
				<image class="tupians" :src="threeMoxing" mode="aspectFit"></image>
			</view>
			<view class="commodity_btm flex_ZC">
				<view class="commodity_btm_box">
					<view class="commodity_name flex_c">
						<text :class="checkLength(this.productName)>8 ? 'namess':'names'">{{this.productName}}</text>
					</view>
					<view class="series flex_ld">
						<view class="series_box flex_ld">
							<text>系列</text>
							<text>{{goodsSeries.series_name}}</text>
						</view>
						<view class="series_box flex_dq">
							<text>限量</text>
							<text>{{infoDetail.circulation == 0 ?'不限量':infoDetail.circulation + '份'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view> 
		<!-- 发行方 -->
		<view class="issuer flex_Z">
			<view class="issuer_box flex_dq">
				<image :src="shopBrand.logo" mode="aspectFill"></image>
				<view class="issuer_btm flex_Z">
					<text class="f28">发行方</text>
					<text class="f24 c9">{{shopBrand.name}}</text>
				</view>
			</view>
		</view>
		<!-- 藏品描述 -->
		<view class="describe_box">
			<view class="describe_tit flex_dq">
				<view class="sss" v-for="(item,index) in list1" :key="index">
					<text :class="index == inx? 'active':''" @click="isTaggle(index)">{{item}}</text>
				</view>
			</view>
			<view class="describe_ntm flex_c" v-if="inx == 0">
				<rich-text class="quanyi" :nodes="nodeCentent"></rich-text>
			</view>
			<view class="describe_ntm flex_c" v-if="inx == 1">
				<rich-text class="quanyi" :nodes="nodeCentent2"></rich-text>
			</view>
			<!-- <view class="equity_box qyi_box flex_Z" v-if="inx == 1">
				<view class="equity color1 flex_Z">
					<view class="equity_list bor_btm flex_dq">
						<rich-text class="quanyi_s" :nodes="nodeCentent2"></rich-text>
					</view>
				</view>
			</view> -->
			<view class="describe_ntm flex_c" v-if="inx == 2">
				<rich-text class="quanyi" :nodes="nodeCentent3"></rich-text>
			</view>
		</view>
		<view class="notice_box flex_ZC">
			<view class="notice flex_c">
				<text class="tiao"></text>
				<text>购买需知</text>
				<text class="tiao"></text>
			</view>
			<view class="xuzhi">
				<rich-text class="f24 colors" :nodes="nodeCentent4"></rich-text>
			</view>
		</view>
		<view class="technology flex_c">
			<image src="../../static/image/thl.png" mode=""></image>
		</view>

		<view class="buy_btn flex_ld_a" v-if="infoDetail.equity_type!=6">
		<view class="wrapst" v-if="buy_condition_data">
			<view class="tit">
				需要:{{buy_condition_data.name}}
			</view>
			<view class="txtt" v-if="buy_condition_data.condition==3">
				是否拥有{{buy_condition_data.name}}:{{buy_condition_data.member_number>0?"拥有":"未拥有"}}
			</view>
			<view class="gohq"  v-if="buy_condition_data.member_number!=buy_condition_data.number"   @click="tipShowtwo=true">
				去获取 <uni-icons type="right" color="#666666"></uni-icons>
			</view>
		</view>
			<view class="wrapst" v-for="(item,index) in  condition_data" :key="item.id">
				<view class="tit">
					需要:{{item.name}}
				</view>
				<view class="txtt" v-if="item.condition!=1">
					当前数量：{{item.member_number}}张 所需数量：{{item.number*numbers}}张
				</view>
				<view class="txtt" v-if="item.condition==1">
					是否拥有虎符:{{item.member_number>0?"拥有":"未拥有"}}
				</view>
				<view class="gohq" @click="goshowrule(index)">
					去获取 <uni-icons type="right" color="#666666"></uni-icons>
				</view>
			</view>
			<view class="mainwraps">
				<view v-if="infoDetail.status == 2 && infoDetail.limit_num>0">
					<u-number-box integer :min="1" :max="infoDetail.limit_num" button-size="36" color="#ffffff"
						bgColor="#2E2A56" iconStyle="color: #ffffff" v-model.trim="numbers" disabledInput
						@overlimit="overLimit"></u-number-box>
				</view>
				<view v-else-if="infoDetail.status == 2 && infoDetail.limit_num == 0">
					<u-number-box integer :min="0" :max="0" button-size="36" color="#ffffff" bgColor="#2E2A56"
						iconStyle="color: #ffffff" v-model.trim="infoDetail.limit_num"
						@overlimit="overLimits"></u-number-box>
				</view>
				<view v-else>
					<u-number-box integer :min="1" :max="infoDetail.limit_num" button-size="36" color="#ffffff"
						bgColor="#2E2A56" iconStyle="color: #ffffff" v-model.trim="numbers"
						@overlimit="overLimit"></u-number-box>
				</view>

				<view v-if="goumai" :style="{opacity:canpay?'1':'0.3'}">
					<view class="submit  bgs flex_ld_b" @click="submitPay" v-if="infoDetail.status == 2">
						<image src="../../static/icon/i_money.png" mode=""></image>
						<text>{{totalPrice}}</text>
						<u-line direction="col" color="#ffffff" length="45%"></u-line>
						<text>立即支付</text>
					</view>
				</view>
				<view v-else>
					<view class="submit no_bgs flex_ld_b" v-if="infoDetail.status != 2">
						<text>{{infoDetail.status_desc}}</text>
						<view class="" v-if="infoDetail.status == 1">
							<u-count-down class="c0" :time="countdownTime" format="HH:mm:ss"
								@finish="isFinish"></u-count-down>
						</view>
					</view>
				</view>
			</view>

			<!-- 			<view class="rough flex_ld" v-else-if="infoDetail.status == 3">
				<view class="pay_btn flex_ZC" @click="submitPay">
					<text class="f26">原石支付</text>
					<view class="pay_btn_l flex_dq">
						<image src="../../static/icon/i_ys.png" mode=""></image>
						<text>9999</text>
					</view>
				</view>
				<view class="pay_btn bgss flex_ZC"  @click="submitPay">
					<text class="f26">立即支付</text>
					<view class="pay_btn_r flex_c">
						<image src="../../static/icon/i_money.png" mode=""></image>
						<text>9999</text>
					</view>
				</view>
			</view> -->
		</view>

		<view class="empty3"></view>

		<!-- 支付弹窗 -->
		<u-popup :show="showPay" @close="showPay = false" closeable bgColor="transparent">
			<view class="pay flex_ZC">
				<text class="c6">购买信息</text>
				<view class="pay_box flex_Z">
					<view class="pay_box_c flex_ld">
						<text class="c6">藏品名称</text>
						<text class="c6">{{infoDetail.goods_name}}</text>
					</view>
					<view class="pay_box_c flex_ld">
						<text class="c6">购买数量</text>
						<text class="c6 f28">x {{numbers}}</text>
					</view>
					<view class="pay_money  flex_ld">
						<text class="c6">应支付金额</text>
						<view class=" flex_dq">
							<image class="pay_img" src="../../static/icon/i_money.png" mode=""></image>
							<text class="c6 go_pay">{{totalPrice}}</text>
						</view>
					</view>
				</view>
				<view class="buyNow flex_c" @click="goPay">
					<image class="highlights" src="../../static/image/mask.png" mode=""></image>
					<text>立即购买</text>
				</view>
			</view>
		</u-popup>
		<u-popup :show="tipShowtwo" mode="center" @close="tipShowtwo = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit" v-if="buy_condition_data">
					您未拥有{{buy_condition_data.name}}，请购买{{buy_condition_data.name}}
				</text>
		
				<view class="prompt_ntm" @click="goxxh" >
					<text>现在就去</text>
				</view>
			
				<view class="empty"></view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text v-if="parityBit == 'jymm'" class="prompt_tit">未设置交易密码</text>
				<text v-if="parityBit == 'smrz'" class="prompt_tit">请先实名认证</text>
				<text v-if="parityBit == 'gmmy'" class="prompt_tit">{{remind}}</text>
				
				<text v-if="parityBit == 'other'" class="prompt_tit">{{remind}}</text>
				<view class="prompt_ntm" v-if="parityBit != 'other'" @click="goNixtPage">
					<text>现在就去</text>
				</view>
				<view class="prompt_ntm" v-if="parityBit == 'other'" @click="tipShow = false">
					<text>关闭</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		<u-popup :show="ruleshow" mode="center" @close="ruleshow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="ssssd">{{ruletext}}</text>
				<view class="prompt_ntm" @click="ruleshow = false">
					<text>确定</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getuserinfo,
		memberBalance
	} from "../../api/index.js";
	import {
		goodsInfo,
		secretGoods
	} from "../../api/store.js";
	export default {
		data() {
			return {
				inx: 0,
				ids: '', //藏品id
				isPay: '', //是否设置交易密码
				realName: '', //是否实名认证
				parityBit: '', //拦截提示
				numbers: 1, //数量
				pinpaiId: '', //品牌id
				threeMoxing: '', //3D模型 gif图
				productName: '', //商品名称
				remind: '', //是否允许购买提示词
				countdownTime: 100, //开始时间
				allowPurchases: false, //是否允许购买拦截
				tipShow: false, //提示弹窗
				allowPay: false, //是否允许购买
				showWant: false, //弹窗
				showPay: false, //支付弹窗
				duoxuan: false, //切换多选
				taggle: false, // 价格升降
				goumai: false, //活动是否开始
				infoDetail: {}, //商品信息
				goodsSeries: {}, //系列
				shopBrand: {}, //品牌信息
				nodeCentent: '', //富文本
				nodeCentent2: '', //富文本
				nodeCentent3: '', //富文本
				nodeCentent4: '',
				titles: '', //标题
				backgroundColor: "transparent", //标题背景颜色
				list1: ['藏品描述', '权益介绍'],
				list2: [{id:1,name:'DAO贡献赠送倍数'},{id:2,name:'提现额度赠送倍数 '}],
				condition_data: [],
				ruleshow: false,
				ruletext: "",
				canpay: false,
				special:false,
				xuanz:'../../static/icon/i_checkbox.png',
				xuanw:'../../static/icon/i_checkbox1.png',
				buy_condition_data:null,
				tipShowtwo:false
			}
		},
		onLoad(e) {
			console.log(e);
			this.ids = e.id
		},
		onShow(e) {
			// 每次到详情关闭所有弹窗
			this.tipShow = false
			this.allowPay = false
			this.showPay = false
			this.tipShowtwo=false
			this.realName = uni.getStorageSync("realName")
			this.isPay = uni.getStorageSync("ispay")
			this.isGoodsInfo()
			this.isSecretGoods()
		},
		computed: {
			// 计算总价
			totalPrice() {
				return (this.numbers * this.infoDetail.price).toFixed(2)
			},
		},
		methods: {
			goxxh(){
				uni.navigateTo({
					url: '/pagesMy/mallCenter/productDetails?id=' + this.infoDetail.buy_condition_data.id
				})
			},
			goshowrule(index) {
				if (this.infoDetail.module_type == 4) {
					uni.navigateTo({
						url: "/pagesMy/secretRealm/secretRealmIndex"
					})
				} else {
					console.log(index)
					this.ruleshow = true
					this.ruletext = this.condition_data[index].get_tip
				}
			},
			isFinish() {
				console.log('倒计时结束');
				if (this.infoDetail.status == 1) {
					this.goumai = true
					this.infoDetail.status = 2
					console.log(this.infoDetail.status);
				}
			},


			// 动态计算字体大小
			checkLength(v) {
				const realLength = v.length;
				return realLength;
			},
			// 用户信息
			getuser() {
				memberBalance().then(res => {
					console.log(res)
					this.isPay = res.data.is_pay
					this.realName = res.data.is_real
				})
			},
			// 初始化详情
			isGoodsInfo() {
				let data = {
					id: this.ids,
				};
				goodsInfo(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.pinpaiId = res.data.brand_id
						this.infoDetail = res.data
						this.productName = res.data.goods_name
						this.condition_data = res.data.condition_data
						this.buy_condition_data=res.data.buy_condition_data
						console.log(this.buy_condition_data)
						const regex = new RegExp('<img', 'gi');
						// if(this.infoDetail.is_buy==0 && this.infoDetail.buy_condition_data.condition==3){
						// 	this.tipShow=true
						// 	this.parityBit="gmxxh"
						// 	this.remind="您未拥有夏小慧，请购买夏小慧"
						// 	console.log("走了")
						// }
						if (res.data.content) {
							var htmlContent = res.data.content
							htmlContent = htmlContent.replace(regex, `<img style="max-width: 100%;"`)
							this.nodeCentent = htmlContent;
						}
						if (res.data.info) {
							var htmlContent2 = res.data.info
							htmlContent2 = htmlContent2.replace(regex, `<img style="max-width: 100%;margin:6px 0"`)
							this.nodeCentent2 = htmlContent2;
						}

						if (res.data.purchase_info) {
							var htmlContent4 = res.data.purchase_info
							htmlContent4 = htmlContent4.replace(/\r\n/g, "<p/>");
							this.nodeCentent4 = htmlContent4;
						}

						this.threeMoxing = res.data.three_d
						this.goodsSeries = res.data.goods_series
						this.shopBrand = res.data.shop_brand

						if (res.data.status == 1) {
							this.countdownTime = res.data.surplus_time * 1000
						} else if (res.data.status == 2) {
							this.goumai = true
						} else {
							this.goumai = false
						}
					}
				})
			},
			// 查看是否有购买权限
			isSecretGoods() {
				let data = {
					goods_id: this.ids,
				};
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				this.canpay = false
				secretGoods(data).then(res => {
					uni.hideLoading()
					this.canpay = true
					console.log(11111111, res);
					if (res.code == 1) {
						this.allowPay = true
					} else if (res.code == '1001') {
						this.remind = res.msg
						this.parityBit = 'gmmy'
					}else{
						this.parityBit = 'other'
						this.remind = res.msg
					}
				})
			},

			isTaggle(index) {
				this.inx = index
			},
			// 页面滚动
			onPageScroll: function(e) {
				const scrollTop = e.scrollTop; // 获取页面滚动位置
				// 根据滚动位置修改状态栏样式
				if (scrollTop > 100) {
					this.backgroundColor = '#E0DDDA';
					this.titles = '详情';
				} else {
					this.backgroundColor = 'transparent';
					this.titles = '';
				}
				// console.log("滚动距离为：" + e.scrollTop);
			},
			// 步进器
			overLimit(e) {
				// console.log(e);
				if (e == 'plus') {
					uni.$u.toast('超出限购数量');
				} else {
					uni.$u.toast('最少限购1个');
				}
			},
			// 立即支付
			submitPay() {
				// 没有实名认证
				// console.log(this.realName);
				if (!this.realName) {
					this.tipShow = true
					this.parityBit = 'smrz'
					return;
				}
				// 没有设置交易密码
				if (!this.isPay) {
					this.tipShow = true
					this.parityBit = 'jymm'
					return;
				}
				// 拦截提醒
				// if(this.allowPurchases){
				// 	uni.$u.toast(this.remind);
				// 	return
				// }
				// 判断用户是否可以购买
				if (this.allowPay) {
					this.showPay = true
				} else {
					this.tipShow = true
				}

			},
			// 拦截校验
			goNixtPage() {
				if (this.parityBit == 'jymm') {
					uni.navigateTo({
						url: '/pagesMy/setting/amendsafepassword?first=' + 'first'
					})
				} else if (this.parityBit == 'smrz') {
					uni.navigateTo({
						url: '/pagesMy/setting/realNameAuthentication'
					})
				} else if (this.parityBit == 'gmmy') {
					// 购买身份卡牌
					uni.navigateTo({
						url: '/pagesMy/brandCenter/numbercard?id=' + this.pinpaiId
					})
				}
				else if (this.parityBit == 'gmxxh') {
					// 购买身份卡牌
					uni.navigateTo({
						url: '/pagesMy/mallCenter/productDetails?id=' + this.infoDetail.buy_condition_data.id
					})
				}
			},
			// 立即购买
			goPay() {
				let productCacheInfo = {
					productType: 1,
					selectId: this.infoDetail.id,
					numbers: this.numbers,
					allMoney: Number(this.totalPrice).toFixed(2),
					notice: this.infoDetail.purchase_info,
					goodsId: this.infoDetail.id,
					ufl_rmb_prop: this.infoDetail.ufl_rmb_prop,
				}
				uni.setStorageSync("productCacheInfo", productCacheInfo)
				if (this.infoDetail.module_type == 1) {
					uni.navigateTo({
						url: '/pagesMy/brandCenter/paymentCenter'
					})
				} else if (this.infoDetail.module_type == 2 || this.infoDetail.module_type == 4 || this.infoDetail
					.module_type == 5) {
					if (this.condition_data[0].number * this.numbers > this.condition_data[0].member_number) {
						uni.$u.toast(this.condition_data[0].name + "不够")
					} else {
						uni.navigateTo({
							url: '/pagesMy/brandCenter/paymentCenter'
						})
					}
				} else if (this.infoDetail.module_type == 3 && this.condition_data[0].member_number >= 1) {
					uni.navigateTo({
						url: '/pagesMy/brandCenter/paymentCenter'
					})
				}
			},
		},
	}
</script>
<style scoped>
	@font-face {

		font-family: 'iconfont2';
		src: url("~@/iconfont/YouSheBiaoTiHei.ttf");
	}

	.commodity {
		width: 690rpx;
		margin: 0 auto;
		margin-top: -90rpx;
	}

	.commodity_top {
		position: relative;
		width: 92%;
		height: 580rpx;
		/* background: url(../../static/image/bg11.png); */
		/* background-size: 100% 100%; */
		margin: 0 auto;
		z-index: 7;
	}

	.tupians {
		position: absolute;
		top: 20rpx;
		left: 50%;
		width: 100%;
		height: 560rpx;
		transform: translateX(-50%);
		z-index: 60;
	}

	.commodity_btm {
		position: relative;
		width: 532rpx;
		height: 282rpx;
		background: url(../../static/image/bg12.png);
		background-size: 100% 100%;
		color: #9E845F;
		margin: 0 auto;
		z-index: 6;
	}

	.commodity_btm_box {
		/* width: 58%; */
		margin-top: 80rpx;
		z-index: 99;
	}

	.commodity_name {
		margin-bottom: 30rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.names {
		font-size: 36rpx;
	}

	.namess {
		font-size: 30rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.series_box {
		background: #C3B39F;
		font-size: 20rpx;
		padding-right: 6rpx;
		color: #Ffffff;
		margin: 0 10rpx;
	}

	.series_box>text:nth-child(1) {
		font-size: 22rpx;
		padding: 6rpx 10rpx;
		border-radius: 10rpx;
		background: #A68A64;
		margin-right: 8rpx;
		color: #Ffffff;
	}

	.issuer {
		width: 690rpx;
		margin: 0 auto;
		z-index: 99;
	}

	.issuer_box {
		width: 100%;
		border-radius: 20rpx;
		background: #F2F2F2;
		padding: 16rpx 0;
	}

	.issuer_box>image {
		width: 76rpx;
		height: 76rpx;
		border-radius: 50%;
		margin: 0 26rpx;
	}

	.issuer_btm {
		width: 78%;
	}

	.issuer_btm>text:nth-child(2) {
		/* background: pink; */
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}


	.describe_box {
		width: 690rpx;
		margin: 0 auto;
		background: #F2F2F2;
		/* padding-bottom: 40rpx; */
		border-radius: 20rpx;
	}

	.describe_tit {
		width: 636rpx;
		margin: 40rpx auto;
		padding-top: 30rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.sss>text {
		margin-right: 50rpx;
		font-size: 36rpx;
		color: #666666;
	}

	.describe_ntm {
		width: 690rpx;
		min-height: 100rpx;
		/* max-height: 1200rpx; */
		margin: 0 auto;
	}

	.active {
		color: #8C7554 !important;
		font-weight: 700;
	}

	.qyi_box {
		background: #F2F2F2;
	}

	.yshou {
		background: #271E29;
	}

	.color1 {
		color: #D8BB8C;
	}

	.equity_box {
		width: 638rpx;
		margin: 24rpx auto 0;
	}

	.equity {
		width: 100%;
		font-size: 32rpx;
	}

	.equity_top {
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		padding-left: 24rpx;
	}

	.equity_list {
		width: 100%;
	}

	.bor_r {
		border-right: 1rpx solid #29231E;
	}

	.equity_list>text:nth-child(1) {
		width: 35%;
		height: 86rpx;
		line-height: 86rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
	}

	.equity_list>text:nth-child(2) {
		width: 65%;
		margin-left: 24rpx;
		font-size: 24rpx;
	}

	.equity_list_s>text:nth-child(1) {
		width: 35%;
		height: 86rpx;
		line-height: 86rpx;
		padding-left: 24rpx;
		font-size: 28rpx;
	}

	.equity_list_s>text:nth-child(2) {
		width: 30%;
		margin-left: 24rpx;
		font-size: 24rpx;
	}

	.equity_list_s>text:nth-child(3) {
		width: 35%;
		margin-left: 24rpx;
		font-size: 24rpx;
	}

	.quanyi {
		width: 92%;
		overflow: hidden;
		color: #666666;
		font-size: 24rpx;
		line-height: 1.6;
	}

	.quanyi_s {
		color: #666666;
		line-height: 1.6;
		width: 100%;
		overflow: hidden;
		font-size: 24rpx;
		padding: 20rpx 30rpx;
	}

	.notice_box {
		width: 690rpx;
		background: #F2F2F2;
		border-radius: 20rpx;
		margin: 24rpx auto;
		padding-bottom: 20rpx;
	}

	.notice {
		width: 100%;
		padding: 20rpx 0;
	}

	.notice>text:nth-child(2) {
		font-size: 36rpx;
		color: #A68A64;
		font-family: 'iconfont2';
		margin: 0 24rpx;
	}

	.tiao {
		width: 154rpx;
		height: 6rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		border-radius: 4rpx;
	}

	.xuzhi {
		padding: 0 50rpx;
		overflow: auto;
	}

	.colors {
		color: #666666;
		line-height: 1.6;
	}

	.technology {
		width: 100%;
		/* background: pink; */
	}

	.technology>image {
		width: 70%;
		height: 60rpx;
	}

	.buy_btn {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		background: #ffffff;
		display: flex;
		flex-direction: column;
	}

	.buy_btn>text {
		width: 224rpx;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 36rpx;
		border: 1rpx solid #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
	}


	.submit {
		width: 348rpx;
		height: 88rpx;
		border-radius: 40rpx;
	}

	.bgs {
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
	}

	.no_bgs {
		background: linear-gradient(274deg, #ab9880, #d7c4aa);
	}

	.no_bgs>text {
		color: #ffffff50 !important;
	}

	.submit>text {
		line-height: 76rpx;
		border-radius: 36rpx;
		font-size: 32rpx;
		text-align: center;
		color: #ffffff;
	}

	.submit>image {
		width: 36rpx;
		height: 36rpx;
	}


	.pay {
		width: 100%;
		background: #E0DDDA;
		border-radius: 20rpx 20rpx 0 0;
		color: #ffffff;
		overflow: auto;
	}

	.pay>text {
		font-size: 36rpx;
		margin: 60rpx 0;
	}

	.pay_box {
		width: 694rpx;
		background: #ffffff;
		border-radius: 18rpx;
	}

	.pay_box_c {
		font-size: 24rpx;
		padding: 28rpx 28rpx 0;
	}

	.pay_box_c>text:nth-child(1) {
		color: #A7A4AD;
	}


	.pay_box_c>text:nth-child(2) {
		width: 70%;
		text-align: right;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	.xuanxze_box{
		margin: 16rpx 0;
	}
	.xuanxze{
		padding: 6rpx 28rpx;
		font-size: 24rpx;
		color: #999999;
	}
	.xuanxze>image{
		width: 30rpx;
		height: 30rpx;
	}

	.pay_money {
		width: 92%;
		padding: 16rpx 0 30rpx;
		margin: 0 auto;
		font-size: 24rpx;
		border-top: 1rpx solid #ffffff20;
	}

	.pay_img {
		width: 32rpx;
		height: 32rpx;
	}

	.rough {
		width: 60%;
		/* background: pink; */
	}

	.pay_btn {
		min-width: 176rpx;
		padding: 4rpx 0;
		background: #A423EA;
		color: #ffffff;
		border-radius: 40rpx;
	}

	.pay_btn_l>image {
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}

	.pay_btn_r>image {
		width: 28rpx;
		height: 28rpx;
		margin: 0 6rpx;
	}

	.bgss {
		width: 230rpx !important;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
	}

	.go_pay {
		font-size: 36rpx;
		font-family: 'iconfont2';
		margin-left: 10rpx;
	}

	.buyNow {
		position: relative;
		width: 92%;
		margin: 50rpx auto;
	}

	.buyNow>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	.prompt {
		width: 600rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}


	.wrapst {
		position: relative;
		width: 750rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
		margin-top: 10rpx;
	}

	.gohq {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		color: #666666;
	}

	.tit {
		width: 750rpx;
		margin-left: 30rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #666;
	}

	.txtt {
		margin-left: 30rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #A6A5AF;
		margin-top: 30rpx;
	}

	.mainwraps {
		position: relative;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 20rpx 0;
	}

	.ssssd {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
	}


	/deep/.u-number-box__minus {
		background: #d7c4aa !important;
	}

	/deep/.u-number-box__plus {
		background: #d7c4aa !important;
	}

	/deep/.u-number-box__input {
		background: #d7c4aa !important;
	}

	/deep/.u-count-down__text {
		color: #ffffff !important;
		opacity: 0.5;
	}
</style>